<!--
 * @Author: hejianbo
 * @Date: 2024-06-16 13:51:58
 * @LastEditors: hejianbo
 * @FilePath: /src/views/activity/medicalRepresent.vue
 * @Description: 医药代表管理
-->
<template>
  <list-wrapper>
    <template slot="header">
      <mt-form-search :configData="configData" :model="currentModel"></mt-form-search>
    </template>
    <template slot="content">
      <mt-table-list class="mt-20" :configData="tableConfig" :data="list" :pagination="query"></mt-table-list>
    </template>
    <template slot="footer">
      <pagination
        v-show="query.total > 0"
        :total="query.total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList(query)"
      />
    </template>

    <ActivityAddMedicalPop v-if="addVisible" @close="addVisible = false" :info="currentInfo" @confirm="handleConfirm">
    </ActivityAddMedicalPop>

    <!-- 导入弹层 -->
    <mt-import-pop
      v-if="importPopVisible"
      @onDownLoad="handleDownload"
      @confirm="handleSave"
      @close="importPopVisible = false"
    >
    </mt-import-pop>
  </list-wrapper>
</template>
<script>
import ActivityAddMedicalPop from "./components/addMedicalPop.vue";
import * as apis from "@/api/activity.js";

export default {
  name: "",
  components: {
    ActivityAddMedicalPop,
  },
  props: {},
  data() {
    this.configData = [
      { label: "姓名/手机号", prop: "keywords", tag: "el-input", placeholder: "请输入姓名/手机号", clearable: true },
      { label: "推广部", prop: "department", tag: "el-input", placeholder: "请输入推广部", clearable: true },
      { label: "小组", prop: "groupName", tag: "el-input", placeholder: "请输入小组", clearable: true },
      {
        label: "状态",
        prop: "status",
        tag: "el-select",
        placeholder: "全部",
        options: [
          { label: "有效", value: "A" },
          { label: "无效", value: "X" },
        ],
        clearable: true,
      },
      {
        label: "搜索",
        tag: "el-button",
        icon: "el-icon-search",
        handle: (data) => {
          Object.assign(this.query, data, { pageNum: 1 });
          this.getList(this.query);
        },
      },
      {
        label: "重置",
        labelHidden: true,
        tag: "el-button",
        icon: "el-icon-refresh",
        type: "plain",
        handle: () => {
          this.currentModel = {
            keywords: "",
            status: "",
          };

          Object.assign(this.query, this.currentModel);
          this.getList(this.query);
        },
      },
      {
        label: "新增",
        tag: "el-button",
        icon: "el-icon-plus",
        handle: (data) => {
          this.handleAdd();
        },
      },
      {
        label: "导入",
        tag: "el-button",
        icon: "el-icon-download",
        handle: (data) => {
          this.importPopVisible = true;
        },
      },
    ];

    this.tableConfig = [
      { label: "序号", type: "index", width: 100 },
      { label: "医药代表姓名", prop: "userName" },
      { label: "手机号", prop: "mobilePhone" },
      { label: "工号", prop: "userCode" },
      { label: "区域", prop: "area" },
      { label: "推广部", prop: "department" },
      { label: "小组", prop: "groupName" },
      { label: "省市", prop: "province" },
      {
        label: "状态",
        prop: "status",
        tagFormatter: (v) => ({ A: "success", X: "danger" }[v]),
        formatter: (row, column, v) => ({ A: "有效", X: "无效" }[v]),
      },
      {
        label: "操作",
        width: "300px",
        list: [
          {
            label: "编辑",
            icon: "el-icon-edit",
            handle: (row) => {
              this.currentInfo = row;
              this.addVisible = true;
            },
          },
          {
            formatter: ({ status }) => (status == "A" ? "无效" : "有效"),
            icon: "el-icon-edit",
            handle: ({ medicineUserId, status }) => {
              this.$confirm(`确定更新为${status == "A" ? "无效" : "有效"}?`, "提示", {
                type: "warning",
              }).then(() => {
                apis.activityMedicineUserStatus(medicineUserId, !(status == "A")).then(() => {
                  this.$message.success(status == "A" ? "更新为无效！" : "更新为有效！");
                  this.getList(this.query);
                });
              });
            },
          },
        ],
      },
    ];

    return {
      importPopVisible: false,

      addVisible: false,
      currentInfo: null,

      currentModel: {},
      list: [],
      query: {
        projectId: this.$route.params.id,
        keywords: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {},
  mounted() {
    this.getList(this.query);
  },
  watch: {},
  computed: {},
  methods: {
    handleDownload() {
      apis.activityUserTemplate("certigier").then((res) => {
        if (res.msg) {
          location.href = decodeURIComponent(res.msg);
          this.$message.success("导出成功！");
        }
      });
    },
    handleSave(formData, { failHandler }) {
      apis
        .activityMedicineUserImport(this.query.projectId, formData)
        .then(({ entity }) => {
          this.importPopVisible = false;
          this.getList(this.query);
          if (entity && entity.fail && entity.fail.length) {
            this.$message.error(`导入失败的账户：${entity.fail.join(", ")}`);
          } else {
            this.$message.success("导入成功！");
          }
        })
        .catch(() => {
          failHandler && failHandler();
        });
    },

    handleAdd() {
      this.addVisible = true;
      this.currentInfo = null;
    },
    handleConfirm() {
      this.addVisible = false;
      this.getList(this.query);
    },
    getList(params) {
      params = this.$paramsFormat(params);

      apis.medicineUserPage(params).then((res) => {
        this.list = res.data;
        this.query.total = res.total;
      });
    },
  },
};
</script>

<style scoped></style>
